import React from 'react';
import { connect } from 'umi';
import ApplicationSearch from "../../components/organize/application/ApplicationSearch";
import ApplicationToolbar from "../../components/organize/application/ApplicationToolbar";
import ApplicationModal from "../../components/organize/application/ApplicationModal";
import ApplicationList from "../../components/organize/application/ApplicationList";
import TablePagination from '../../components/common/TablePagination';

class DepartmentPage extends React.Component {

  render() {

    let {dispatch, globalModel, applicationModel} = this.props;
    const { applicationList, total, applicationLoading, operateType, applicationModalVisible, currentPage, pageSize,
            selectedRowKeys, selectedRows, applicationInfoData, searchParams, unfoldCollapseKeys } = applicationModel;

    const applicationSearchProps = {
      onSearch: (searchParams) => {
        dispatch({type: "applicationModel/updateState", payload: {searchParams}});
        dispatch({type: 'applicationModel/getListDatas', payload: {currentPage, pageSize, params: searchParams}});
      },
      onReset: () => {
        dispatch({type: "applicationModel/updateState", payload: {searchParams: null}});
      },
    }

    const applicationModalProps = {
      operateType,
      applicationModalVisible,
      applicationInfoData,
      onSave: (values) => {
        dispatch({type: "applicationModel/addApplication", payload: values});
      },
      updateDepartment: (values) => {
        dispatch({type: "applicationModel/updateDepartment", payload: values});
      },
      onCancel: () => {
        dispatch({type: "applicationModel/updateState", payload: {applicationModalVisible: false}});
      },
    }

    const applicationToolbarProps = {
      isCollapse: unfoldCollapseKeys.length == 0 ? false : true,
      addSave: () => {
        dispatch({type: "applicationModel/updateState", payload: {applicationModalVisible: true}});
      },
      unfoldCollapse: () => {
        dispatch({type: "applicationModel/unfoldCollapse", payload: {}});
      }
    }

    const applicationListProps = {
      currentPage,
      pageSize,
      applicationList,
      applicationLoading,
      unfoldCollapseKeys,
      onEdit: (record) => {
        dispatch({
          type: "applicationModel/updateState",
          payload: {applicationModalVisible: true, operateType: "edit", applicationInfoData: record}
        });
      },
      onDelete: (record) => {
        dispatch({type: "applicationModel/deleteDepartment", payload: {ids: record.id}});
      },
      rowSelection: {
        selectedRowKeys,
        selectedRows,
        onChange: (keys, selectedRows) => {
          dispatch({
            type: 'applicationModel/updateState',
            payload: {
              selectedRows: selectedRows,
              selectedRowKeys: keys,
            },
          })
        },
      },
      onExpandList: (expanded, record) => {
        if (expanded) {
          unfoldCollapseKeys.push(record.id);
        } else {
          const index = unfoldCollapseKeys.indexOf(record.id);
          if (index > -1) unfoldCollapseKeys.splice(index, 1);
        }
        dispatch({ type: "applicationModel/updateState", payload: { unfoldCollapseKeys }});
      },
    }

    const tablePaginationProps = {
      total,
      currentPage,
      pageSize,
      onPageChange: (currentPage, pageSize) => {
        dispatch({type: 'applicationModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
      },
      onShowSizeChange: (currentPage, pageSize) => {
        dispatch({type: 'applicationModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
      },
    };

    return (
      <div style={{ padding: "15px" }}>
        <ApplicationSearch {...applicationSearchProps} />
        <ApplicationToolbar {...applicationToolbarProps} />
        <ApplicationModal {...applicationModalProps} />
        <ApplicationList {...applicationListProps} />
        <TablePagination {...tablePaginationProps} />
      </div>
    );
  };
}

function mapStateToProps({globalModel, applicationModel}){
  return {globalModel, applicationModel};
}

export default connect(mapStateToProps)(DepartmentPage);
